<template>
  <!--  jiera-->
  <div>
    <div v-if="pagination.total > 0">
      <div
        v-for="item in taskList"
        :key="item.id"
        class="mb-3 cursor-pointer"
        @click.stop="!!true ? () => handelGoDetail(item.id as number) : () => {}"
        v-login="!!true?()=>handelGoDetail(item.id as number):undefined"
      >
        <div style="display: flex; align-items: center">
          <!--        外层固定-->
          <div style="width: 70%; display: flex; flex-direction: column">
            <!--        里层固定-->
            <div class="flex gap-3 items-center">
              <el-avatar
                :src="item.userAvatar"
                @click.stop="handleGoPersonalHomePage(item.userId)"
              />
              <div class="text-sm font-semibold" style="color: #2f2f2f">
                <div>{{ item.createdName }}</div>
              </div>
              <div class="text-xs"></div>
              <div
                style="
                  font-size: 20px;
                  font-weight: bold;
                  color: #6c74b3;
                  text-shadow: 2px 2px 4px #aaa;
                "
                >vip</div
              >
              <div style="color: #989694">{{
                dayjs(item.createdTime).format('YYYY-MM-DD HH:MM:ss')
              }}</div>
            </div>
            <div style="font-weight: bold; font-size: 25px">{{ item.title }}</div>
            <div class="mt-2">
              {{ item.description }}
            </div>
            <div class="flex gap-1 mt-3">
              <el-button type="primary" link v-if="item.type === 1">#赚赏金</el-button>
              <el-button type="primary" link v-if="item.type === 0">#随便聊</el-button>
              <el-button type="primary" link v-if="item.type === 2">#闲置贴</el-button>
              <el-button type="primary" link v-if="item.type === 10">#附近贴</el-button>
              <el-button type="primary" link>
                <!-- 使用v-if和v-else指令来切换按钮文字 -->
                <span v-if="item.type === 0">#交流贴</span>
                <span v-else-if="item.type === 1">#赏金贴</span>
                <span v-else-if="item.type === 2">#求助贴</span>
                <span v-else-if="item.type === 10">#征召贴</span>
                <span v-else>{{}}</span>
              </el-button>
              <div
                class="distance"
                style="margin-left: 2%"
                v-if="props.typeId === '10'"
                >距离：{{ item.distance }}</div
              >
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center gap-8">
                <div
                  class="flex items-stretch gap-0.5 cursor-pointer text-sm"
                  hover:text-gray-400
                  v-for="handle in handleList"
                  :key="handle.icon"
                  @click.stop="!!true ? () => handleClick(handle.type, item.id!) : () => {}"
                  v-login="!!true?()=>handleClick(handle.type, item.id!):undefined"
                >
                  <div
                    v-if="item[handle.checkedFieldName!]"
                    :class="handle.checkedIcon"
                    :style="{ color: '#409eff' }"
                  ></div>
                  <div v-else :class="handle.icon"></div>
                  <div>{{ item[handle.fieldName] || 0 }}</div>
                </div>

                <el-button
                  type="primary"
                  size="small"
                  @click.stop="handleTaskUpdate(item.id, item.type)"
                  v-if="item.userId == currentLoginUserId"
                  >编辑
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  @click.stop="handleDeleteTask(item.id)"
                  v-if="item.userId == currentLoginUserId"
                  >删除
                </el-button>
              </div>
              <div class="right">
                <slot :id="item.id"></slot>
              </div>
            </div>
          </div>
          <!--        里层固定-->
          <div class="hah" style="width: 27%; justify-content: flex-end">
            <img
              v-if="item.images && item.images.length > 0"
              :src="item.images[0]"
              alt=""
              class="image-display"
              @click.stop="showFullSizeImage(item.images[0])"
            />
          </div>
          <!-- 用于展示全屏大图的模态框 -->
          <div class="image-modal" v-if="isFullSizeImageVisible">
            <img :src="fullSizeImageSrc" alt="" @click.stop="hideFullSizeImage" />
          </div>
        </div>
        <!--        外层固定-->
        <!-- 评论 -->
        <div class="divider"></div>
      </div>
      <div class="mt-2 flex justify-end">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="pagination.total"
          v-model:current-page="currentPage"
        />
      </div>
    </div>
    <NoData v-else></NoData>
  </div>
</template>

<script setup lang="ts">
import { TaskEntity, Pagination } from '~/composables/api/task'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const route = useRoute()
const props = withDefaults(
  defineProps<{
    list: TaskEntity[]
    pagination: Pagination
    typeId: string | number
  }>(),
  {
    list: () => [],
    pagination: () => ({ pageSize: 10, pageNum: 1, total: 0 }),
  },
)
const $emit = defineEmits(['refresh'])

const currentUserId = computed(() => {
  return route.query?.id || '10034'
})
const currentLoginUserId = computed(() => userStore.userInfo.uid || '1000000')

const currentPage = computed({
  get: () => props.pagination.pageNum,
  set: (value) => {
    $emit('refresh', { pageNum: value })
  },
})

const handleList = ref([
  {
    icon: 'i-carbon-thumbs-up',
    checkedIcon: 'i-carbon-thumbs-up-filled',
    type: 'liked',
    fieldName: 'likedNum',
    checkedFieldName: 'isLiked',
  },
  {
    icon: 'i-carbon-star',
    checkedIcon: 'i-carbon-star-filled',
    type: 'collected',
    fieldName: 'collectedNum',
    checkedFieldName: 'isCollected',
  },
])

const taskList: ComputedRef<any[]> = computed(() => {
  return props.list
})

const handleClick = async (type: string, id: string | number) => {
  if (type === 'liked') {
    await service.task.likeTask(id)
    $emit('refresh')
  } else if (type === 'collected') {
    await service.task.collectTask(id)
    $emit('refresh')
  }
}

const router = useRouter()
const handelGoDetail = (id: number) => {
  router.push(`/main/task/${id}`)
}

const handleDeleteTask = async (id: any) => {
  const confirmResult = await ElMessageBox.confirm('确认删除该任务?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })

  if (confirmResult) {
    const data = { taskId: id }
    await service.task.delete(data)
    $emit('refresh')
  }
}

const handleTaskUpdate = (id: string, type: number) => {
  router.push({
    path: `/main/task/handle?id=${id}`,
    query: {
      taskType: type,
      id: id,
    },
  })
}

const handleGoPersonalHomePage = (userId: string) => {
  router.push(`/main/personalHomepage?id=${userId}`)
}

const taskInfo = ref<any>({})

// 存储是否显示全屏大图的状态
const isFullSizeImageVisible = ref(false)
// 存储当前要展示的全屏大图的源地址
const fullSizeImageSrc = ref('')
// 存储当前图片在图片列表中的索引
const currentIndex = ref(0)

// 图片点击显示全屏
const showFullSizeImage = (image) => {
  isFullSizeImageVisible.value = true
  fullSizeImageSrc.value = image
  currentIndex.value = taskInfo.images.indexOf(image)
}

const hideFullSizeImage = () => {
  isFullSizeImageVisible.value = false
}
</script>

<style>
.delete-button {
  background: none;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.fas.fa-trash-alt {
  margin-right: 6px;
  font-size: 16px;
}

.small-text {
  font-size: 0.8em; /* 根据需要调整字体大小，这里设置为比原来小的 0.7 倍 */
}

.divider {
  border-top: 1px solid #ccc; /* 分割线颜色和宽度 */
  margin: 10px 0; /* 上下间距 */
}

.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  alignitems: center;
  z-index: 999;
}

.image-modal img {
  max-width: 90%;
  max-height: 90%;
}

.image-modal-navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.image-modal-navigation button {
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
}

img.image-display {
  max-height: 144px; /* 根据实际需求调整最大高度值 */
  width: auto; /* 保持图片宽高比 */
}
</style>
